<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>TestCase Template Management</title>

<link rel="stylesheet" href="style.css" /> 

<link rel="stylesheet" href="../../lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../../lib/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="../../lib/backbone/backbone.modal.css">
<link rel="stylesheet" href="../../lib/backbone/backbone.modal.theme.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-select-all.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-paginator.css">
<link rel="stylesheet" href="../../lib/backgrid/backgrid-filter.css">

<!-- actually zhangwei comment the following two 
<link rel="stylesheet" href="../../css/styles.css" />
<link rel="stylesheet" href="../../css/layout.css" /> 
-->

</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div id="sidebar" class="span2 container">side bar content here</div>
			<div class="appmodal"></div>
			<div id="winetile" class="span10 container">
				Object Tile Area for Listing and Addnew/Editing
			</div>

<!-- 			<div id="winetile" class="span10 container"> -->
<!-- 				<div class="page-header"> -->
<!-- 					<h1 align="center"> -->
<!-- 						TestCase Template Management <small>  by listview </small> -->
<!-- 					</h1> -->
<!-- 				</div> -->
<!-- 				<div> -->
<!-- 					<ul> -->
<!-- 						<a href="#">TestCase Template List</a> | <a href="#testcasetemplate/new">Add New</a> | -->
<!-- 						<a href="#">Comments</a> | <a href="#" class="open">Open Modal</a> -->
<!-- 					</ul> -->
<!-- 					<div class="appmodal"></div> -->
<!-- 				</div> -->
<!-- 				<div id="dataview"> -->
<!-- 					<div id="actionlistview">action list here</div> -->
<!-- 					<div id="itemlistview" class="backgrid-container">item list</div> -->
<!-- 				</div> -->
<!-- 				 
<!-- 				<div id="itemdetailview" align="center"> -->
<!-- 					item detail here -->
<!-- 					<h1>Item detail div</h1> -->
<!-- 				</div> -->
<!-- 				--> 
<!-- 			</div> -->
		</div>
	</div>

	<script src="../../lib/jquery-1.11.0.js"></script>
	<script src="../../lib/bootstrap/bootstrap.js"></script>
	<script src="../../lib/backbone/underscore.js"></script>
	<script src="../../lib/backbone/backbone.js"></script>
	<script src="../../lib/backbone/backbone.modal.js"></script>
	<script src="../../lib/backgrid/backbone-pageable.js"></script>
	<script src="../../lib/backgrid/backgrid.js"></script>
	<script src="../../lib/backgrid/backgrid-select-all.js"></script>
	<script src="../../lib/backgrid/backgrid-paginator.js"></script>
	<script src="../../lib/backgrid/backgrid-filter.js"></script>

	<script type="text/template" id="tpl_winetile">
	<div id="winetile">
		<div class="page-header">
			<h1 align="center">
				TestCase Template Management <small>  by listview </small>
			</h1>
		</div>
		<div id="objecteditor">object editor
			here. If you see this, it means the object list view or object item
			view are not displayed successfully!</div>
	</div>
	</script>

	<script type="text/template" id="tpl_itemlist">
	<div id="itemlist">
		<a href="#wines/new" id="addnew" class="btn btn-success">Add</a> 
		<!-- 
		<a href="#wines/deleteselected" id="deleteselected" class="btn btn-danger">Delete Selected</a>
		-->
		<a href="#" id="deleteselected" class="btn btn-danger">Delete Selected</a> 
		<a href="#" id="openmodal" class="btn btn-success">Open Modal</a> 
		<!-- <a href="#" class="open">Open Modal</a> -->
		<div id="showEditModal"></div>
		<div id="backgrid" class="backgrid-container">If you see this, it means the backgrid is not displayed properly</div>
	</div>
	</script>

	<script type="text/template" id="modal-template">
		<div class="bbm-modal__topbar">
     	<h3 class="bbm-modal__title">TestCase Template</h3>
    	</div>
		<div class="bbm-modal_section">
			<form role="form" class="form-horizontal contract-form">
				<div class="form-group">
					<label class="col-sm-4 control-label">Id:</label>
					<div class="col-sm-6">
						<input id="wineId" name="id" type="text" value="<%= id %>"
							class="form-control contact-name-input" disabled />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Name:</label>
					<div class="col-sm-6">
						<input type="text" id="name" name="name" value="<%= name %>"
							class="form-control contact-name-input" required />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Grapes:</label>
					<div class="col-sm-6">
						<input type="text" id="grapes" name="grapes"
							class="form-control contact-name-input" value="<%= grapes %>" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Country:</label>
					<div class="col-sm-6">
						<input type="text" id="country" name="country"
							class="form-control contact-name-input" value="<%= country %>" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Region:</label>
					<div class="col-sm-6">
						<input type="text" id="region" name="region"
							class="form-control contact-name-input" value="<%= region %>" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Year:</label>
					<div class="col-sm-6">
						<input type="text" id="year" name="year"
							class="form-control contact-name-input" value="<%= year %>" />
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-4 control-label">Notes:</label>
					<div class="col-sm-6">
						<textarea id="description" name="description"
							class="form-control contact-name-input"><%= description %></textarea>
					</div>
				</div>
			</form>
		</div>
		<div class="bbm-modal__bottombar">
    		<a href="#" class="bbm-button save">Save</a>
			<a href="#" class="bbm-button cancel">Cancel</a>
		</div>
	</script>

	<script type="text/template" id="tpl_modal_test">
    	<div class="bbm-modal__topbar">
      		<h3 class="bbm-modal__title">Welcome TestCase Template Detail</h3>
    	</div>
    	<div class="bbm-modal__section">
      		<p>With Backbone, Backgrid you can experice !</p>
      		<p>Some features are:</p>
      		<ul>
        		<li>Backbone frontend MVC.</li>
        		<li>Default behaviors like ESC or clicking outside a modal.</li>
        		<li>Some awesome animations that make them feel robust.</li>
        		<li>Responsive and usable on mobile devices.</li>
      		</ul>
    	</div>
    	<div class="bbm-modal__bottombar">
      		<a href="#" class="bbm-button">Close</a>
    	</div>
  	</script>

<!--
 	<script type="text/template" id="tpl_winetitle"> 
	<div id="winetile" class="page-header">
		<h1 align="center">
			BackGrid Complete Example with Filters and Paginator <small>Winestore Example </small>
		</h1>
		<div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">Wine List</a></li>
			<li><a href="wines/new">Add New</a></li>
			<li><a href="#">Comments</a></li>
		</ul>
		</div>
		<div id="actionlist"></div>
		<div id="itemlist" class="backgrid-container"></div>
		<div id="itemdetail" align="center">
			<h1>Item detail div</h1>
		</div>
	</div>	
	</script>

	<script type="text/template" id="tpl_actionlist">
		<button id="addnew" class="btn btn-outline btn-lg btn-block addnew">Add New</button>
		<button id="deleteselected" class="btn btn-outline btn-lg btn-block deleteselected">Delete Selected</button>
		<a href="#wines/new" class="btn btn-success">ADD</a>
		<a href="#wines/deleteselected" class="btn btn-danger">DeleteSelected</a>
	</script>

-->

	<script type="text/template" id="tpl_itemdetail">
	<h2 class="page-header text-center">Wine Detail</h2>
	<form role="form" class="form-horizontal contract-form">
	
	<div class="form-group">
		<label class="col-sm-4 control-label">Id:</label>
		<div class="col-sm-6">
			<input id="wineId" name="id" type="text" value="<%= id %>"
				class="form-control contact-name-input" disabled />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-4 control-label">Name:</label>
		<div class="col-sm-6">
			<input type="text" id="name" name="name" value="<%= name %>"
				class="form-control contact-name-input" required />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-4 control-label">Grapes:</label>
		<div class="col-sm-6">
			<input type="text" id="grapes" name="grapes"
				class="form-control contact-name-input" value="<%= grapes %>" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-4 control-label">Country:</label>
		<div class="col-sm-6">
			<input type="text" id="country" name="country"
				class="form-control contact-name-input" value="<%= country %>" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-4 control-label">Region:</label>
		<div class="col-sm-6">
			<input type="text" id="region" name="region" class="form-control contact-name-input" value="<%= region %>" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-4 control-label">Year:</label>
		<div class="col-sm-6">
			<input type="text" id="year" name="year"
				class="form-control contact-name-input" value="<%= year %>" />
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-4 control-label">Notes:</label>
		<div class="col-sm-6">
			<textarea id="description" name="description"
				class="form-control contact-name-input"><%= description %></textarea>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-3">
			<button type="submit" class="btn btn-outline btn-lg btn-block save" data-dismiss="modal">Submit</button>
		</div>
		<div class="col-sm-3">
			<button class="btn btn-outline btn-lg btn-block cancel">Cancel</button>
		</div>
	</div>
	
	</form>
	</script>

	<script src="testcasetemplate.js"></script>

</body>
</html>
